<template>
  <view class="invitation-container">
    <!-- 顶部选项卡 -->
    <view class="tabs">
      <view
        class="tab-item"
        :class="{ active: activeTab === 'invited' }"
        @click="changeTab('invited')"
      >
        已邀请
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'accepted' }"
        @click="changeTab('accepted')"
      >
        已同意
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'rejected' }"
        @click="changeTab('rejected')"
      >
        已拒绝
      </view>
    </view>

    <!-- 邀请者信息卡片 -->
    <view class="card-list">
      <view
        class="card-item"
        v-for="(item, index) in filteredList"
        :key="index"
      >
        <view class="card-header">
          <text class="name">{{ item.name }}</text>
          <text class="position">{{ item.position }}</text>
          <text class="time">{{ item.time }}</text>
        </view>
        <view class="card-info">
          <text class="experience">{{ item.experience }}</text>
          <text class="education">{{ item.education }}</text>
          <text class="salary">{{ item.salary }}</text>
          <text class="age">{{ item.age }}</text>
        </view>
        <view class="card-details">
          <text class="company">{{ item.company }}</text>
          <text class="role">{{ item.role }}</text>
          <text class="date">{{ item.date }}</text>
        </view>
        <text class="expectation">求职期望：{{ item.expectation }}</text>
        <view class="responsibilities">
          <text v-for="(resp, i) in item.responsibilities" :key="i" class="responsibility-item">
            {{ resp }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'invited', // 当前选中的选项卡
      invitedList: [ // 已邀请列表
        {
          name: '李xx',
          position: '求职岗位',
          time: '10:00',
          experience: '3年',
          education: '本科',
          salary: '6-10k',
          age: '28岁',
          company: '佛山某某某有鉴公司',
          role: '工程师',
          date: '2020.01-2024-11',
          expection: 'java',
          responsibilities: [
            '负责什么工作内容',
            '负责什么工作内容',
            '负责什么工作内容'
          ]
        }
      ],
      acceptedList: [ // 已同意列表
        {
          name: '孙xx',
          position: '求职岗位',
          time: '10:00',
          experience: '3年',
          education: '本科',
          salary: '6-10k',
          age: '28岁',
          company: '佛山某某某有鉴公司',
          role: '工程师',
          date: '2020.01-2024-11',
          expection: 'java',
          responsibilities: [
            '负责什么工作内容',
            '负责什么工作内容',
            '负责什么工作内容'
          ]
        }
      ],
      rejectedList: [] // 已拒绝列表
    };
  },
  computed: {
    // 根据当前选项卡过滤显示的列表
    filteredList() {
      if (this.activeTab === 'invited') {
        return this.invitedList;
      } else if (this.activeTab === 'accepted') {
        return this.acceptedList;
      } else if (this.activeTab === 'rejected') {
        return this.rejectedList;
      }
      return [];
    }
  },
  methods: {
    // 切换选项卡
    changeTab(tab) {
      this.activeTab = tab;
    }
  }
};
</script>

<style scoped>
.invitation-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.tabs {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;
}

.tab-item {
  font-size: 28rpx;
  color: #666;
  padding: 10rpx 20rpx;
  border-bottom: 4rpx solid transparent;
}

.tab-item.active {
  color: #007AFF;
  border-bottom-color: #007AFF;
}

.card-list {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.card-item {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
}

.position {
  font-size: 28rpx;
  color: #666;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.card-info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.experience,
.education,
.salary,
.age {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
}

.card-details {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.company,
.role,
.date {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
}

.expectation {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.responsibilities {
  margin-left: 20rpx;
}

.responsibility-item {
  font-size: 28rpx;
  color: #666;
}
</style>